---
title: Global config
---

::doc-component-demo
---
title: Nuxt configuration
---

A Nuxt application is configured through the `nuxt.config.ts` file. In this file, we can setup core features of nuxt, enable modules, configure them, extend from other layers, and more.

Each layer has a `nuxt.config.ts` file that is used to configure the layer itself. Layers can also have a `app.config.ts` file that is used to manage the layer's default app configuration. In that case, you should also find a `nuxt.schema.ts` file that is used to define the layer's configuration schema.

:doc-heading{label="nuxt.config.js"}

This is an overview of the nuxt configuration file. It's used to change the way nuxt works *(disable server-side rendering, change the build directory, etc, apply cache rules to specific routes, ...)*

```ts [app/nuxt.config.js]
export default defineNuxtConfig({
  extends: [
    // register layers
  ],
  modules: [
    // register modules
  ],

  // rest of your nuxt config ...
})
```

:doc-heading{label="Runtime config"}

Everything defined in the `nuxt.config.ts` file is not exposed in either the client or the server. To expose a variable to the client, you need to use the `runtimeConfig` property. This property is used to expose variables to the client, and to the server.

```ts [app/nuxt.config.js]
export default defineNuxtConfig({
  runtimeConfig: {
    // expose variables only to server
    secretKey: 'my-private-key',

    public: {
      // expose variables to both server and client
      mapboxToken: 'my-public-token'
    }
  }
})
```

The runtime config can then be accessed in the server using the `useRuntimeConfig` nuxt composable:

```ts [app/server/api/hello.ts]
export default defineEventHandler((event) => {
  const config = useRuntimeConfig()
  // config.secretKey
  // config.public.mapboxToken
})
```

And in the client using same composable, note that you only have access to the `public` variables:


```vue [app/components/MyComponent.vue]
<script setup lang="ts">
const config = useRuntimeConfig()
// config.public.mapboxToken
</script>
```


:doc-heading{label="Environement variables"}

When using the `runtimeConfig` property, you can use environment variables to define their value. This is useful when you want to use different values for different environments.

Like seen in the previous example, you can define the `NUXT_SECRET_KEY` and `NUXT_PUBLIC_MAPBOX_TOKEN` value using an environment variable.

During development, or at build time, you can use `.env` files to define environment variables. These files are located at the root of your project and are named `.env` and `.env.local`. Note that when running the production build, no `.env` file is used.


---

Useful resources:

- [Read configuration guide on nuxt.com](https://nuxt.com/docs/migration/configuration)
- [Read runtime config guide on nuxt.com](https://nuxt.com/docs/guide/going-further/runtime-config)

::





::doc-component-demo
---
title: Tairo configuration
---

In addition to the nuxt configuration, another file is used to configure the app itself. This file is named `app.config.ts` and is used to configure the app layout, theme, and more.

:doc-heading{label="app.config.ts"}


```ts [app/app.config.js]
export default defineAppConfig({
  // tairo specific config
  tairo: {
    // app title suffix
    title: 'My app',

    // register tairo panels
    panels: [],

    // configure error page
    error: {},

    // layout configuration...
  },

  // @shuriken-ui/nuxt specific config
  nui: {
    // configure default component shape
    defaultShape: {},
  },

  // rest of your app config ...
})
```

App configuration can then be accessed in components using the `useAppConfig` nuxt composable. We use this internally to configure the layout, the theme, and other features, but nothing stops you from using it to configure your own components.

```vue [app/components/MyComponent.vue]
<script setup lang="ts">
const appConfig = useAppConfig()
// appConfig.tairo
</script>
```

---

Useful resources:

- [View default nui config on github.com](https://github.com/shuriken-ui/nuxt#configuration)

::



::doc-nav
---
prev: /documentation/setup/add-a-layout
next: /documentation/config/sidebar
---
::